<template>
	<el-card>
		<i id="span1" class="el-icon-user-solid"> 系统菜单</i>
		<!-- 
	  模糊查询系统菜單
	   -->
		<div>
			<el-form :inline="true" :model="selectMenusForm" class="demo-form-inline">

				<el-form-item label="菜单名称:">
					<el-input v-model="selectMenusForm.menusname" placeholder="请输入菜单名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="selectMenus()">筛选</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div>
			<el-button type="primary" size="small" class="but1" @click="addSystemFirstMenusdialog=true">新增菜单</el-button>
			<el-button class="but1" type="primary" size="small" @click="">导出</el-button>
			<el-button class="but1" type="primary" size="small" @click="">导入</el-button>
		</div>
		<!-- 修改菜单信息 -->
		<div>
			<el-dialog width="50%" title="修改菜单信息" :visible.sync="UpSystemMenusdialog" @close="resertUpSystemMenus">
				<i id="span1" class="el-icon-orange"> 修改菜单</i>
				<div class="dialog-content">
					<el-form size="mini" ref="UpSystemMenusForm" :model="UpSystemMenusForm" label-position="left"
						label-width="100px" id="elform">
						<el-form-item label="前端组件" class="input-wrapper" prop="assembly">
							<el-input v-model="UpSystemMenusForm.assembly" :disabled='true'
								placeholder="请输入前端组件"></el-input>
						</el-form-item>
						<el-form-item label="菜单名称" class="input-wrapper" prop="menusname">
							<el-input v-model="UpSystemMenusForm.menusname" placeholder="请输入角菜单名称"></el-input>
						</el-form-item>
						<el-form-item label="默认跳转地址" class="input-wrapper">
							<el-input v-model="UpSystemMenusForm.path" placeholder="请输入跳转地址"></el-input>
						</el-form-item>
						<el-form-item label="菜单图标" class="input-wrapper">
							<el-input v-model="UpSystemMenusForm.icon" placeholder="请输入菜单图标"></el-input>
						</el-form-item>
						<el-form-item label="排序" class="input-wrapper">
							<el-input v-model="UpSystemMenusForm.sort"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="UpSystemMenus()">修改</el-button>
							<el-button @click="resertUpSystemMenus()">取消</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-dialog>
		</div>
		<!-- 添加一级菜单 -->
		<div>
			<el-dialog width="50%" title="添加一级菜单" :visible.sync="addSystemFirstMenusdialog"
				@close="resertAddFirstSystemMenus">
				<i id="span1" class="el-icon-orange"> 添加菜单</i>
				<div class="dialog-content">
					<el-form size="mini" ref="addSystemMenusForm" :model="addSystemMenusForm" label-position="left"
						label-width="100px" id="elform">
						<el-form-item label="前端组件" class="input-wrapper" prop="assembly">
							<el-input v-model="addSystemMenusForm.assembly" :disabled='true'
								placeholder="请输入前端组件"></el-input>
						</el-form-item>
						<el-form-item label="菜单名称" class="input-wrapper" prop="menusname">
							<el-input v-model="addSystemMenusForm.menusname" placeholder="请输入角菜单名称"></el-input>
						</el-form-item>
						<el-form-item label="默认跳转地址" class="input-wrapper">
							<el-input v-model="addSystemMenusForm.path" placeholder="请输入跳转地址"></el-input>
						</el-form-item>
						<el-form-item label="菜单图标" class="input-wrapper">
							<el-input v-model="addSystemMenusForm.icon" placeholder="请输入菜单图标"></el-input>
						</el-form-item>
						<el-form-item label="排序" class="input-wrapper">
							<el-input v-model="addSystemMenusForm.sort"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="addFirstSystemMenus()">添加</el-button>
							<el-button @click="resertAddFirstSystemMenus()">取消</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-dialog>
		</div>
		<!-- 添加二级菜单 -->
		<div>
			<el-dialog width="50%" title="添加二级菜单" :visible.sync="addSystemSecondMenusdialog"
				@close="resertAddSecondSystemMenus">
				<i id="span1" class="el-icon-orange"> 添加菜单</i>
				<div class="dialog-content">
					<el-form size="mini" ref="addSecondSystemMenusForm" :model="addSecondSystemMenusForm"
						label-position="left" label-width="100px" id="elform">
						<el-form-item label="前端组件" class="input-wrapper" prop="assembly">
							<el-input v-model="addSecondSystemMenusForm.assembly" :disabled='true'
								placeholder="请输入前端组件"></el-input>
						</el-form-item>
						<el-form-item label="菜单名称" class="input-wrapper" prop="menusname">
							<el-input v-model="addSecondSystemMenusForm.menusname" placeholder="请输入角菜单名称"></el-input>
						</el-form-item>
						<el-form-item label="默认跳转地址" class="input-wrapper">
							<el-input v-model="addSecondSystemMenusForm.path" placeholder="请输入跳转地址"></el-input>
						</el-form-item>
						<el-form-item label="菜单图标" class="input-wrapper">
							<el-input v-model="addSecondSystemMenusForm.icon" placeholder="请输入菜单图标"></el-input>
						</el-form-item>
						<el-form-item label="排序" class="input-wrapper">
							<el-input v-model="addSecondSystemMenusForm.sort"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="addSecondSystemMenus()">添加</el-button>
							<el-button @click="resertAddSecondSystemMenus()">取消</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-dialog>
		</div>
		<div>
			<!-- 表格服务信息展示 -->
			<el-table :data="MenusList" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
				:tree-props="{children: 'children'}">
				<el-table-column prop="menusname" label="菜单名称" sortable></el-table-column>
				<el-table-column prop="level" label="菜单类型" sortable>
					<template slot-scope="scope">
						{{ scope.row.level === 1 ? '一级菜单' : '二级菜单' }}
					</template>
				</el-table-column>
				<el-table-column prop="icon" label="图标" sortable>
					<template slot-scope="scope">
						<i :class="scope.row.icon"></i>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="assembly" label="组件" sortable></el-table-column> -->
				<el-table-column prop="path" label="路径" sortable></el-table-column>
				<el-table-column prop="sort" label="排序" sortable></el-table-column>
				<el-table-column prop="caozuo" label="操作">
					<template slot-scope="scope">
						<el-button @click="selectMenusById(scope.row.id)" type="primary" size="mini">编辑</el-button>
						&nbsp;
						<el-dropdown @command="handleCommand">
							<el-button type="primary" size="mini"
								class="el-icon-arrow-down el-icon--right el-dropdown-link ">更多</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-if="scope.row.assembly==1"
									:command="{ id: scope.row.id, action: '添加下级' }">添加下级</el-dropdown-item>
								<el-dropdown-item
									:command="{ id: scope.row.id, action: '数据规则' }">数据规则</el-dropdown-item>
								<el-dropdown-item :command="{ id: scope.row.id, action: '删除' }">删除</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				// 修改菜单
				UpSystemMenusForm: {
					id: '',
					assembly: '',
					menusname: '',
					path: '',
					icon: '',
					sort: ''
				},
				/* 添加一级菜单 */
				addSystemMenusForm: {
					assembly: '1',
					menusname: '',
					path: '',
					icon: '',
					sort: ''
				},
				// 添加二级菜单
				addSecondSystemMenusForm: {
					assembly: '',
					menusname: '',
					path: '',
					icon: '',
					sort: ''
				},
				MenusList: [{
					children: []
				}],
				queryInfo: {
					pageNum: 1,
					pageSize: 4,
				},
				total: '',
				selectMenusForm: {
					menusname: ''
				},
				addSystemFirstMenusdialog: false,
				addSystemSecondMenusdialog: false,
				UpSystemMenusdialog: false
			}
		},
		/* 钩子函数 */
		beforeMount: function() {
			this.selectMenus(); // 当前页面加载完，立马执行该方法
		},
		methods: {
			/* 
			 分页查询所有菜单*/
			async selectMenus() {
				var param = new URLSearchParams();
				param.append('pageNum', this.queryInfo.pageNum);
				param.append('pageSize', this.queryInfo.pageSize);
				param.append('menusname', this.selectMenusForm.menusname);
				let res = await this.$http.post('selectSystemMenus', param)
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					this.selectMenusForm.menusname = ''
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.MenusList = res.data.data.list;
					this.total = res.data.data.total;
					this.pageNum = res.data.data.pageNum;
					this.pageSize = res.data.data.pageSize;
					this.selectMenusForm.menusname = ''
				}
			},
			/* 根据id查询菜单 用于修改*/
			async selectMenusById(id) {

				let res = await this.$http.get('selectSystemMenus/' + id)
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					return;
				}
				// 添加成功
				if (res.data.code == 200) {
					this.UpSystemMenusdialog = true
					this.UpSystemMenusForm = res.data.data
				}
			},

			/* 修改菜单函数 */
			async UpSystemMenus() {
				var param = new URLSearchParams();
				param.append('id', this.UpSystemMenusForm.id);
				param.append('assembly', this.UpSystemMenusForm.assembly);
				param.append('path', this.UpSystemMenusForm.path);
				param.append('menusname', this.UpSystemMenusForm.menusname);
				param.append('sort', this.UpSystemMenusForm.sort);
				param.append('icon', this.UpSystemMenusForm.icon);
				let res = await this.$http.post('updateSystemMenus', param)
				if (res.data.code == 400) { // 修改失败
					this.$message.error(res.data.msg);
					return;
				}
				// 修改成功
				if (res.data.code == 200) {
					this.UpSystemMenusdialog = false
					this.selectMenus()
				}
			},
			/* 添加一级菜单 */
			async addFirstSystemMenus() {
				var param = new URLSearchParams();
				param.append('assembly', this.addSystemMenusForm.assembly);
				param.append('path', this.addSystemMenusForm.path);
				param.append('menusname', this.addSystemMenusForm.menusname);
				param.append('sort', this.addSystemMenusForm.sort);
				param.append('icon', this.addSystemMenusForm.icon);
				let res = await this.$http.post('addSystemMenuone', param)
				if (res.data.code == 400) { // 添加失败
					this.$message.error(res.data.msg);
					return;
				}
				// 添加成功
				if (res.data.code == 200) {
					this.addSystemMenusForm.menusname = ''
					this.addSystemMenusForm.path = ''
					this.addSystemMenusForm.icon = ''
					this.addSystemMenusForm.sort = ''
					this.addSystemFirstMenusdialog = false
					this.selectMenus()
				}
			},
			/* 添加二级菜单 */
			async addSecondSystemMenus() {
				var param = new URLSearchParams();
				param.append('assembly', this.addSecondSystemMenusForm.assembly);
				param.append('path', this.addSecondSystemMenusForm.path);
				param.append('menusname', this.addSecondSystemMenusForm.menusname);
				param.append('sort', this.addSecondSystemMenusForm.sort);
				param.append('icon', this.addSecondSystemMenusForm.icon);
				let res = await this.$http.post('addSystemMenutwo', param)
				if (res.data.code == 400) { // 添加失败
					this.$message.error(res.data.msg);
					return;
				}
				// 添加成功
				if (res.data.code == 200) {
					this.addSecondSystemMenusForm.menusname = ''
					this.addSecondSystemMenusForm.path = ''
					this.addSecondSystemMenusForm.icon = ''
					this.addSecondSystemMenusForm.sort = ''
					this.addSystemSecondMenusdialog = false
					this.selectMenus()
				}
			},
			/* 一级菜单取消添加重置 */
			resertAddFirstSystemMenus() {
				this.addSystemMenusForm.menusname = ''
				this.addSystemMenusForm.path = ''
				this.addSystemMenusForm.icon = ''
				this.addSystemMenusForm.sort = ''
				this.addSystemFirstMenusdialog = false
			},
			/* 二级菜单取消添加重置 */
			resertAddSecondSystemMenus() {
				this.addSecondSystemMenusForm.menusname = ''
				this.addSecondSystemMenusForm.path = ''
				this.addSecondSystemMenusForm.icon = ''
				this.addSecondSystemMenusForm.sort = ''
				this.addSystemSecondMenusdialog = false
			},
			/* 修改菜单取消添加重置 */
			resertUpSystemMenus() {
				this.UpSystemMenusdialog = false
			},
			async deleteMenusById(id) {
				let res = await this.$http.get('delSystemMenus/' + id)
				if (res.data.code == 401) { // 有二级菜单无法删除
					this.$message.error(res.data.msg);
					return;
				}
				if (res.data.code == 400) { // 删除失败
					this.$message.error(res.data.msg);
					return;
				}
				// 删除成功
				if (res.data.code == 200) {
					this.$message.success(res.data.msg);
					this.selectMenus()
				}
			},
			/* 根据id查询菜单 用于添加下级*/
			async selectMenusById1(id) {

				let res = await this.$http.get('selectSystemMenus/' + id)
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					return;
				}
				// 添加成功
				if (res.data.code == 200) {
					this.addSecondSystemMenusForm.assembly = res.data.data.id
					// alert(this.addSecondSystemMenusForm.assembly)
				}
			},
			/*
			 点击更多按钮下拉菜单
			 */
			handleCommand(command) {
				const id = command.id;
				const action = command.action;
				if (action === '添加下级') {
					this.addSystemSecondMenusdialog = true
					this.selectMenusById1(id)

				} else if (action === '删除') { // 处理删除操作
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						// alert('删除')
						this.deleteMenusById(id)
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else if (action === '数据规则') { // 处理冻结操作
					this.$confirm("是否继续此操作", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						alert("数据规则")
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
				}
			},
			// 当每页显示的条数改变时，重新查询总数据
			handleSizeChange(size) { // size ： 改变后的每页展示的条数
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				this.selectMenus();
			},
			// 根据不同的页码，来查询总数据
			handleCurrentChange(pn) { // pn 你要访问的页码
				this.queryInfo.pageNum = pn;
				this.selectMenus();
			}
		}
	}
</script>

<style>
</style>